<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText">返回</block>
			<block slot="content">地址管理</block>
		</cu-custom>
		<view v-for="(item,index) in list" :key="index" class="white-box">
			<view class="name-phone white-padding" @tap="selectAddress(item)">
				<view class="name">{{item.realname}}</view>
				<view class="phone">{{item.mobile}}</view>
			</view>
			<view class="address white-padding" @tap="selectAddress(item)">{{item.address_name}} {{item.address_details}}</view>
			<view class="operation ">
				<view class="choose" @tap="selectAddress(item)">
					<!-- #ifndef MP-ALIPAY -->
					<radio :data-id="item.id" color="#FBB240" :checked="selected_id==item.id?true:false"></radio>
					<!-- #endif -->
					<text :data-id="item.id">选择</text>
				</view>
				
				<image :src="CLOUDPATH+'/icon-alter.png'" @tap="editAddress(item)"></image>
				<text class="otext" @tap="editAddress(item)">编辑</text>

				<image :src="CLOUDPATH+'/icon-delete.png'" @tap="deleteAddress" :data-id="item.id"></image>
				<text class="otext" @tap="deleteAddress" :data-id="item.id">移除</text>
			</view>
			
		</view>
		
		<!-- <view class="white-box " style="border-top:none;margin-top: 0; display: none;">
			<view class="operation " style="border-top:none;margin-top: 0;">
				<view class="choose" >
					<radio-group @change="radioChange" >
						<radio :value='1' :checked="reward == 1 ? true : false" color="#FBB240" > <text style="margin-left: 5px;">是</text></radio>
						<radio :value='0' :checked="reward == 0 ? true : false" color="#FBB240" > <text style="margin-left: 5px;">否</text></radio>
					</radio-group>
					<text style="color: #F0B918;width: 50%;display: block;float: right;margin-right: 40rpx;">产品直接兑换好东西积分 不需要产品免物流快递</text>
				</view>
			</view>
		</view> -->
		
		<view class="" style="height: 100rpx; width: 100%;"></view>
		<view style="height: 200rpx;width: 70%;color: red;margin: 0 auto;text-align: center;">
			如果下次拼团需要更换地址，请先在个人中心-设置里面清除缓存
		</view>
		<view class="cu-bar foot padding">
			<view @click="addAddress()" class="cu-btn round lg w100" :class="'bg-'+theme">添加地址</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='passwordModal'?'show':''">
			<view class="cu-dialog bg-white" style="" >
				<view class="cu-bar  justify-end">
					<view class="content">提示</view>
					<view style="padding-top: 20px;" class="action" @tap="modalName=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<hr/>
				<view class="padding-xl">
					<text class="text-white">{{check_content}}</text>
				</view>
				<view class="padding-xl">
					<view class="cu-btn round margin-lfet" style="margin-left:-1%;" @tap="modalName=''">取消</view>
					<view class="cu-btn round margin-top" style="margin-left:20%;" @tap="check_selectAddress()">确定</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				check_content:'',
				list: [],
				hasMore: true,
				loading: false,
				radio: "D",
				address_id: 0,
				selected_id: 0,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				reward:0,
				modalName:'',
				modalNameItem:[],
			}
		},
		onLoad() {
			if (this.$common.loginAuth(true)) {}
		},
		onShow() {

			if (this.$common.loginAuth(true)) {
				let list = this.$common.getCache('address_list')
				
				if (!list) {
					this.$nextTick((res) => {
						uni.startPullDownRefresh({
							success() {
								console.log('success')
							},
							fail() {
								console.log('fail')
							}
						})
					})
				} else this.list = list
			}
			// this.csh()
		},
		methods: {
			getList() {
				if (!this.loading && this.hasMore) {
					this.$http
						.get('address', {
							page: this.page
						})
						.then((response) => {
							let list = response.data.data
							// for (let i in list) {
							// 	if (list[i].is_default == '1' && !_this.selected_id) {
							// 		_this.selected_id = list[i].id
							// 		uni.setStorageSync('address_id', list[i].id)
							// 		break
							// 	}
							// }

							this.$common.setCache('address_list', list, 60 * 60)
							this.list = list
							this.page++
							this.loading = false
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							console.log(response)
							uni.stopPullDownRefresh()
						})
				} else
					uni.stopPullDownRefresh()
			},
			deleteAddress(e) {
				let _this = this
				let id = e.currentTarget.dataset.id
				let list = _this.list
				uni.showModal({
					title: '温馨提示',
					content: '是否确定要删除该地址',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中...'
							})
							_this.$http
								.delete('address', {}, id)
								.then((response) => {
									console.log(response)
									_this.$common.showSuccess('删除成功')
									_this.$common.rmCache('address_default')
									if (id == _this.selected_id) {
										_this.selected_id = null
										uni.setStorageSync('address_id', null)
									}
									_this.$nextTick((r) => {
										uni.startPullDownRefresh()
									})
								})
								.catch((response) => {
									console.log(response)
								})
						}
					}
				})
			},
			csh() {
				this.$http
				 	.get('whole_type', {
				 		reward: this.reward,
						type: 0
				 	})
				 	.then((response) => {
						console.log(response.data.data.whole_type)
				 		this.reward = response.data.data.whole_type
				 	})
				 	.catch((response) => {
				 		console.log(response)
				 		uni.stopPullDownRefresh()
				})
			},
			check_selectAddress(){
				this.selectAddress(this.modalNameItem,1);
				return false;
			},
			selectAddress(address,is_check) {
				// address.reward = this.reward
				// console.log(address)
				// this.$common.setCache('address_select', address)
				// uni.navigateBack({})
				console.log(this.reward);
				let title = '您选择了直接发货'
				if (this.reward == 1) {
					title = '您选择了兑换好东西积分'
				}
				this.modalNameItem = address;
				
				this.check_content = title;
				
				
				// if(is_check !=1){
				// 	this.modalName = 'passwordModal'
				// 	return false
				// }
			
				let _this = this
				// address.reward = this.reward
				_this.$common.setCache('address_select', address)
				this.navigateBack({})
				
				//uni.navigateBack({})
				// uni.showModal({
				// 	title: '提示',
				// 	content: title,
				// 	success: function (res) {
				// 		if (res.confirm) {
				// 			address.reward = this.reward
				// 			console.log(address)
				// 			_this.$common.setCache('address_select', address)
				// 			uni.navigateBack({})
				// 		} else if (res.cancel) {
							
				// 		}
				// 	}
				// });
			},
			radioChange: function(evt) {
				 
				 // if (this.reward == 1) {
					//  this.reward = 0 
					//    console.log(222)
				 // } 
				 // console.log(evt.detail.value)
				 // let address = this.$common.getCache('address_select')
				 // address.reward = this.reward
				 // this.$common.setCache('address_select', address)
				//  this.$http
				//  	.get('whole_type', {
				//  		reward: evt.detail.value,
				// 		type : 1
				//  	})
				//  	.then((response) => {
				//  		this.reward = response.data.data.whole_type
				//  	})
				//  	.catch((response) => {
				//  		console.log(response)
				//  		uni.stopPullDownRefresh()
				// })
			},
			selectReward(reward, address) {
				
			},
			addAddress() {
				uni.navigateTo({
					url: "/pages/member/address/edit"
				})
			},
			editAddress(item) {
				this.$common.setCache('address_edit', item, 5 * 60)
				uni.navigateTo({
					url: "/pages/member/address/edit?id=" + item.id
				})
			},
		},
		onPullDownRefresh() {
			this.page = 1
			this.hasMore = true
			this.loading = false
			this.getList()
		},
	}
</script>

<style>
	.cu-dialog {
		background: url(../../../static/cles.png);
		background-size:100% auto;background-repeat:no-repeat;
	}
	.white-box {
		width: 678rpx;
		margin: 25rpx 36rpx 0;
		padding: 20rpx 0;
		border-radius: 5rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.white-box .white-padding {
		width: 606rpx;
	}

	.white-box .name-phone {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 55rpx;
	}

	.name-phone .name {
		font-size: 32rpx;
	}

	.name-phone .phone {
		font-size: 28rpx;
	}

	.white-box .address {
		font-size: 24rpx;
		font-weight: bold;
		color: rgba(153, 153, 153, 1);
		margin-top: 20rpx;
	}

	.white-box .operation {
		border-top: 1rpx solid #EEEEEE;
		margin-top: 40rpx;
		padding: 20rpx 36rpx 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		font-weight: bold;
		color: rgba(153, 153, 153, 1);
	}

	.operation .choose {
		flex: 1;
		line-height: 52rpx;
	}

	.choose radio {
		margin-right: 33rpx;
	}

	.operation image {
		width: 30rpx;
		height: 30rpx;
		margin: 0 15rpx 0 50rpx;
	}

	button {
		width: 618rpx;
		margin: 258rpx 66rpx 50rpx;
	}
	
	/* 弹窗样式 */
	.padding-xl text{
		font-size: 32rpx;
		font-weight: bold;
	}
	.cu-modal .content{
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		/* margin-top: 10rpx; */
		top: 20rpx;
	}
	.cu-modal hr{
		background-color: #000000;
		width: 80%;
		margin-left: 10%;
	}
	.padding-xl .cu-btn{
		font-size: 32rpx;
		font-weight: bold;
	}
</style>
